<template>
  <el-aside :width="$store.state.isCollapse ? '64px' : '160px'">
    <el-menu
      :default-active="route.fullPath"
      class="el-menu-vertical-demo"
      :collapse="$store.state.isCollapse"
      :collapse-transition="false"
      :router="true"
    >
      <!-- <el-sub-menu v-for="item in menuList" :key="item.id" index="/user-manage">
        <template #title>
          <el-icon><UserFilled /></el-icon>
          <span>用户管理</span>
        </template>
        <el-menu-item index="/user-manage/userAdd">添加用户</el-menu-item>
        <el-menu-item index="/user-manage/userList">用户列表</el-menu-item>
      </el-sub-menu> -->
      <!-- v-if="getRole('首页')"  -->
      <el-menu-item v-if="getRole('首页')" index="/home">
        <el-icon><HomeFilled /></el-icon>
        <span>首页</span>
      </el-menu-item>

      <el-menu-item v-if="getRole('个人中心')" index="/center">
        <el-icon><Avatar /></el-icon>
        <span>个人中心</span>
      </el-menu-item>

      <el-sub-menu v-if="getRole('菜单管理') || getRole('角色管理')" index="/configuration">
        <template #title>
          <el-icon><Cpu /></el-icon>
          <span>配置管理</span>
        </template>
        <el-menu-item v-if="getRole('菜单管理')" index="/configuration/menuManagement">菜单管理</el-menu-item>
        <el-menu-item v-if="getRole('角色管理')" index="/configuration/roleManagement">角色管理</el-menu-item>
      </el-sub-menu>

      <el-sub-menu v-if="getRole('添加用户') || getRole('用户列表')" index="/user-manage">
        <template #title>
          <el-icon><UserFilled /></el-icon>
          <span>用户管理</span>
        </template>
        <el-menu-item v-if="getRole('添加用户')" index="/user-manage/userAdd">添加用户</el-menu-item>
        <el-menu-item v-if="getRole('用户列表')" index="/user-manage/userList">用户列表</el-menu-item>
      </el-sub-menu>

      <el-sub-menu v-if="getRole('添加新闻') || getRole('新闻列表')" index="/news-manage">
        <template #title>
          <el-icon><MessageBox /></el-icon>
          <span>新闻管理</span>
        </template>
        <el-menu-item v-if="getRole('添加新闻')" index="/news-manage/newsAdd">创建新闻</el-menu-item>
        <el-menu-item v-if="getRole('新闻列表')" index="/news-manage/newsList">新闻列表</el-menu-item>
      </el-sub-menu>

      <el-sub-menu v-if="getRole('添加产品') || getRole('产品列表')" index="/product-manage">
        <template #title>
          <el-icon><Reading /></el-icon>
          <span>产品管理</span>
        </template>
        <el-menu-item v-if="getRole('添加产品')" index="/product-manage/productAdd">添加产品</el-menu-item>
        <el-menu-item v-if="getRole('产品列表')" index="/product-manage/productList"
          >产品列表</el-menu-item
        >
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<script setup>
import {
  HomeFilled,
  Avatar,
  Cpu,
  UserFilled,
  MessageBox,
  Reading,
  Pointer
} from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
const route = useRoute()
const router = useRouter();
const menuList = router.getRoutes()
// console.log('menuList', menuList);
const store = useStore()
// const vAdmin = {
//   mounted(el) {
//     // if (store.state.userInfo.role !== 1) {
//     //   el.parentNode.removeChild(el)
//     // }
//   }
// }
const getRole = (name) => {
  let flag = false
  menuList.forEach(item => {
    if (item.name === name) {
      flag = true
    }
  });
  return flag
}
const menus = [
  {
    path: '/home',
    name: '首页'
  },
  {
    path: '/center',
    name: '个人中心'
  },
  {
    path: '/user-manage/userAdd',
    name: '添加用户',
    requireAdmin: true
  },
  {
    path: '/user-manage/userList',
    name: '用户列表',
    requireAdmin: true
  },
  {
    path: '/news-manage/newsAdd',
    name: '添加新闻'
  },
  {
    path: '/news-manage/editNews/:id',
    name: '编辑新闻'
  },
  {
    path: '/news-manage/newsList',
    name: '新闻列表'
  },
  {
    path: '/product-manage/productAdd',
    name: '添加产品'
  },
  {
    path: '/product-manage/productList',
    name: '产品列表'
  }
  // {
  //   path: '/',
  //   // name: () => import('../views/home/Home.vue')
  //   redirect: '/home'
  // },
  // {
  //   path: '/:pathMatch(.*)*',
  //   // name: () => import('../views/home/Home.vue')
  //   name: 'NotFound 404',
  //   name: () => import('../views/notfound/NotFount.vue')
  // },
]
</script>

<style lang="scss" scoped>
.el-aside {
  height: 100vh;
  .el-menu {
    height: 100vh;
  }
}
</style>
